<template>
  <div class="favate-btn" 
    :style="{width: width+'px'}"
    @mouseover="hover = true"
    @mouseleave="hover = false"
    @click="click">
    <div class="favate-btn-back" :class="{'favate-btn-back-show': hover}"/>
    <div class="favate-btn-text">{{text}}</div>
  </div>
</template>

<script>
export default {
  props: ["width", "text"],

  data() {
    return {
      hover: false,
    };
  },

  methods:{
    click(){
      this.$emit('click')
    },
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.favate-btn{
  height: 26px;
  border-radius: 14px;
  border: 1px solid #ccccd8;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  transition: all 1s ease;
  overflow: hidden;

  &:hover, &:active{
    border-color: #555666;
    color:white !important;
  }

  .favate-btn-back{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;    
    background: black;
    transform: translateX(-100%);
    transition: all 0.3s;
  }

  .favate-btn-back-show{
    transform: translateX(0px);
    color:white !important;
  }

  .favate-btn-text{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;  
    color:white;
    color: #555666;
    .flex-center-center();

    &:hover, &:active{
      color:white !important;
    }
  }
}

@media screen and (max-width: 1023px) {
  .favate-btn{
    height: 20px;
    border-radius: 11px;
    border: 1px solid #ccccd8;
    font-size: 12px;
  }
}
</style>
